<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/js01.js">
        function method01(){
            //在dom   叫做节点
            var divElement=document.getElementById('div01');
            console.log(divElement.nodeType,divElement.nodeName,divElement.nodeValue);
        }
        //获取父亲div的所有儿子节点
        function method02(){
            var divFather=document.getElementById('father');
            var childElementArray=divFather.childNodes;
            //获取所有的儿子节点
            console.log(childElementArray.length);
            var firstElement=divFather.firstChild;
            var lastElement=divFather.lastChild;
            console.log('第一个儿子的内容：'+firstElement.innerHTML+'。');
            console.log('最后一个儿子的内容：'+lastElement.innerHTML+'。');
        }
        //获取父亲
        function method03(){
            var divSonElement=document.getElementById('div01');
            var fatherElement=divSonElement.parentNode;
            console.log(fatherElement.innerHTML);
        }
        //获取哥哥
        function method04(){
            var divElement02=document.getElementById('div02');
            var divElement01=divElement02.previousElementSibling;
            console.log('哥哥节点的文本内容为：'+divElement01.innerHTML+'。');
        }
        //获取弟弟
        function method05(){
            var divElement02=document.getElementById('div02');
            var divElement03=divElement02.nextElementSibling;
            console.log('第第节点的文本内容为：'+divElement03.innerHTML+'。');
        }

        function method06(){
            var textElement=document.myform.mytext;
            console.log('文本框里的内容为：'+textElement.value+'。');
            var result01=document.myimg;
            var result02=document.myiframe;
        }
    </script>
</head>
<body>
<div id="father" name="form02">
    <div id="div01">mydiv01的内容</div>
    <div id="div02">mydiv02的内容</div>
    <div id="div03">mydiv03的内容</div>
</div>
<form name="myform">
    <input type="text" name="mytext" value="123">
</form>
<img src="ixxxx" name="myimg"><br>
<iframe name="myiframe"></iframe><br>
<button onclick="method06()">获取div 标签</button>
</body>
</html>